<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			ul,
	        li {
	
	            list-style: none;
	        }
	
	        ul {
	            display: flex;
	            border: 1px solid red;
	            justify-content: space-evenly;
	            padding: 10px 0;
	        }
	
	        ul li {
	            width: 24%;
	            border: 1px solid #ccc;
	            display: flex;
	            flex-direction: column;
	            align-items: center;
	            padding: 10px 0;
	            cursor: pointer;
	
	        }
	
	        ul li img {
	            width: 90%;
	        }
	
	        ul li p {
	            width: 90%;
	            margin: 5px;
	        }
	    </style>
	</head>

	<body>
		<ul id="goods">
			<!-- <li class="goods1"><img src="../images/g1.jpg">
	            <p>姓名：阿联酋美女1号</p>
	            <p>价格：20</p>
	            <p>年龄：20</p>
	        </li> -->
		</ul>
		<script type="text/javascript">
			//列表页 ：主要用来显示一系列商品
			//详情页 ：主要用来显示一个商品的详细信息
			/* 联系   ：点击列表商品 跳转到 详情页 
					详情页只有一个 
					详情页显示的数据 是根据 我在列表页点击商品
					带过去 的参数来决定的
			*/

			var goodlist = [{
					id: 111,
					url: '../images/g1.jpg',
					name: '阿联酋美女1号',
					price: 1998,
					age: 20
				},
				{
					id: 22,
					url: '../images/g2.jpg',
					name: '阿联酋美女2号',
					price: 98,
					age: 18
				},
				{
					id: 3325,
					url: '../images/g3.jpg',
					name: '阿联酋美女3号',
					price: 998,
					age: 22
				},
				{
					id: 4,
					url: '../images/g4.jpg',
					name: '阿联酋美女4号',
					price: 9.8,
					age: 24
				},
				{
					id: 5,
					url: '../images/g3.jpg',
					name: '阿联酋美女5号',
					price: 9888,
					age: 18
				}
			]
			//循环遍历
			goodlist.forEach(function(item, index) {

				goods.innerHTML += '<li idx="'+item.id+'" class="goods1"><img src="' + item.url + '">' +
					'  <p>姓名：' + item.name + '</p>' +
					'  <p>价格：' + item.price + '</p>' +
					' <p>年龄：' + item.age + '</p>' +
					' </li>'
			})
			//点击跳转到  详情页 
			//绑定点击事件
			var list = document.getElementsByTagName('li');
			//list 是伪数组 不能使用 数组的方法 因此不能使用forEach
			for (var  i = 0; i < list.length; i++) {
				list[i].onclick=function(){
					//获取标签的属性 getAttribute
					//跳转到详情页  还要把电机的商品中的一些唯一信息传递过去
					open('js详情页.html?id='+this.getAttribute('idx'));
					
					
					
				}
			}
		</script>
	</body>
</html>
